import { useEffect } from 'react'
import { useColumns } from './columns'
import { useItemColumns } from './columnsItem'
import { DataTable } from './data-table'
import { DataDrawerForm } from './data-drawer-form'
import { DataDrawerFormTool } from './data-drawer-form-tool'
import { DataDrawerFormDebug } from './data-drawer-form-debug'
import { Drawer } from '@renderer/components/ui/drawer'
import usePluginLocalStore from '@renderer/store/plugin-local'
import usePluginLocalToolStore from '@renderer/store/plugin-local-tool'
import { useShallow } from 'zustand/react/shallow'
import { Row } from '@tanstack/react-table'
import type { PluginLocal, PluginLocalTool } from '@shared/types/entity'

const renderSubComponent = (row: Row<PluginLocal>, items: PluginLocalTool[]) => {
  console.log('row', row)
  console.log('items', items)
  return items.filter((i) => i.pluginMark === row.original.mark)
}
export default function PluginLocal(): React.JSX.Element {
  const { data, initData, drater } = usePluginLocalStore(
    useShallow((state) => ({
      data: state.data,
      initData: state.initData,
      drater: state.drater
    }))
  )

  const { tools, initToolData, toolFormType } = usePluginLocalToolStore(
    useShallow((state) => ({
      tools: state.data,
      initToolData: state.initData,
      toolFormType: state.form.type
    }))
  )
  useEffect(() => {
    initData()
    initToolData()
  }, [initData, initToolData])
  return (
    <div className="container mx-auto py-10">
      <Drawer direction="right" handleOnly={true}>
        <DataTable
          data={data}
          items={tools}
          useColumns={useColumns}
          useItemColumns={useItemColumns}
          renderSubComponent={renderSubComponent}
          getRowCanExpand={() => true}
        />
        {drater.type === 'plugin' ? (
          <DataDrawerForm />
        ) : toolFormType === 'debug' ? (
          <DataDrawerFormDebug />
        ) : (
          <DataDrawerFormTool />
        )}
      </Drawer>
    </div>
  )
}
